<template>
  <div class="info_container">
    <div class="dark_gray info_box">
      <div class="info_caption">
        <h2>{{titleOne}}</h2>
        <span class="info_subTitle">目标额：{{iData.MBTZE}}万</span>
      </div>
      <!-- info_caption -->
      <div class="info_echarts">
        <template v-for="(ifd, index) in iData.seriesList">
          <div class="info_group bg_warning" :key="index" v-if="ifd.name === '业务A组'">
            <div class="info_progress">
              <div class="info_progress_up p_warning" :style="{width: (ifd.percent).toFixed(2) > 100 ? 100 + '%' :  (ifd.percent).toFixed(2) +'%'}">
                <span class="percentage">{{(ifd.percent).toFixed(2)}}%</span>
              </div>
            </div>
          </div>
          <!-- /info_group -->
          <div class="info_group bg_success" :key="index" v-else-if="ifd.name === '业务B组'">
            <div class="info_progress">
              <div class="info_progress_up p_success" :style="{width: (ifd.percent).toFixed(2) > 100 ? 100 + '%' :  (ifd.percent).toFixed(2) +'%'}">
                <span class="percentage">{{(ifd.percent).toFixed(2)}}%</span>
              </div>
            </div>
          </div>
          <!-- /info_group -->
          <div class="info_group bg_danger" :key="index" v-else-if="ifd.name === '业务C组'">
            <div class="info_progress">
              <div class="info_progress_up p_danger" :style="{width: (ifd.percent).toFixed(2) > 100 ? 100 + '%' :  (ifd.percent).toFixed(2) +'%'}">
                <span class="percentage">{{ifd.percent.toFixed(2)}}%</span>
              </div>
            </div>
          </div>
          <!-- /info_group -->

          <div class="info_group bg_info" :key="index" v-else-if="ifd.name === '业务D组'">
            <div class="info_progress">
              <div class="info_progress_up p_info" :style="{width: (ifd.percent).toFixed(2) > 100 ? 100 + '%' :  (ifd.percent).toFixed(2) +'%'}">
                <span class="percentage">{{ifd.percent.toFixed(2)}}%</span>
              </div>
            </div>
          </div>
          <!-- /info_group -->
        </template>
      </div>
      <!--/ info_echarts -->
    </div>
    <!--/ info_box -->
    <div class="dark_gray info_box">
      <div class="info_caption">
        <h2>{{titleTwo}}</h2>
      </div>
      <!-- info_caption -->
      <div class="info_echarts" style="width: 4.45rem;height:2rem">
        <fld :fDatas="fDatas"></fld>
      </div>
      <!--/ info_echarts -->
    </div>
    <!--/ info_box -->
  </div>
</template>

<script>
import Fld from '@tv/views/bar/FoldLineDiagram';

export default {
  name: 'InfoPame',
  props: {
    infoData: {
      type: Object,
      default: null
    },
    AchieveData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: {
    Fld
  },
  mounted () {
    this.iData = this.infoData;
  },
  data () {
    return {
      titleOne: '今日实时达成率',
      titleTwo: '今日各组达成情况',
      iData: {},
      fDatas: []
    };
  },
  watch: {
    'infoData': {
      handler(val, oldval) {
        this.iData = val;
      }
    },  
    'AchieveData': {
      handler (val, oldval) {
        const flegend = [];
        const fData = [];
        const fDataRate = [];
        val.forEach(element => {
          if (element.name === '业务A组' || element.name === '业务B组' || element.name === '业务C组' || element.name === '业务D组') {
            flegend.push(element.name);
            fData.push(element.money);
            fDataRate.push(element.percent);
          }
        });
        this.fDatas.push({lg: flegend});
        this.fDatas.push({fd: fData});
        this.fDatas.push({fdr: fDataRate});
      }
    },
    deep: true
  }
};
</script>

<style lang="less" scoped>
  .info_container{
    height: 5.45rem;
    .dark_gray{
      background: #191f28;
    }
    .info_box{
      padding:0 0.2rem;
      height: 2.58rem;
      margin-bottom: 0.29rem;
      &:last-child{
        margin-bottom: 0;
      }
    }
    .info_caption{
      // margin-bottom: 0.12rem;
      overflow: hidden;
      h2{
        margin: 0;
        float:left;
        font-size: 0.22rem;
        line-height: 0.6rem;
        color: #75787e;
      }
      .info_subTitle{
        display: block;
        float: right;
        color: #f0f0f0;
        font-size: 0.18rem;
        line-height: 0.6rem;
      }
    }
    .info_echarts{
      .info_group{
        padding: 0.08rem 0 0 1rem;
        margin-bottom: 0.2rem;
        vertical-align: middle;
        position: relative;
        height: 0.3rem;
        .info_progress{
          position: relative;
          width: 100%;
          height: 0.1rem;
          background: linear-gradient(to bottom ,#2d343c,#303741);
          background: -webkit-linear-gradient(to bottom ,#2d343c,#303741);
          background: -moz-linear-gradient(to bottom ,#2d343c,#303741);
          box-shadow:0 0 0.05rem rgba(0, 0, 0, .2);
          -webkit-box-shadow: 0 0 0.05rem rgba(0, 0, 0, .2);
          -moz-box-shadow: 0 0 0.05rem rgba(0, 0, 0, .2);
          border-radius: 0.1rem;
          -webkit-border-radius: 0.1rem;
          -moz-border-radius: 0.1rem;
          .info_progress_up{
            position: absolute;
            z-index: 2;
            left: 0;
            top: 0;
            width: 0%;
            height: 0.1rem;
            color: #fff;
            border-radius: 0.1rem;
            -webkit-border-radius: 0.1rem;
            -moz-border-radius: 0.1rem;
            .percentage{
              position: absolute;
              z-index: 5;
              top: 0;
              right: -0.35rem;
              display: block;
              width: 0.24rem;
              height: 0.1rem;
              font-size: 0.1rem;
              line-height: 0.1rem;
              color: #f0f0f0;
            }
            &.p_warning{
              background: #f89a39;
            }
            &.p_success{
              background: #28c28a;
            }
            &.p_danger{
              background: #ff5656;
            }
            &.p_info{
              background: #409eff
            }
            &::after{
              content: '';
              position: absolute;
              display: block;
              width: 0.1rem;
              height: 0.1rem;
              right: -0.04rem;
              top: -0.04rem;
              border-radius: 100%;
              -webkit-border-radius: 100%;
              -moz-border-radius: 100%;
              background: #fff;
              border: 0.04rem solid #2b2f3a;
            }
          }
        }
        &.bg_warning::before {
         content: '业务A组';
          background: #f89a39;
        }
        &.bg_success::before {
          content: '业务B组';
          background: #28c28a;
        }
        &.bg_danger::before{
          content: '业务C组';
          background: #ff5656;
        }
        &.bg_info::before{
          content: '业务D组';
          background: #409eff;
        }
        &:last-child{
          margin-bottom: 0;
        }
        &::before{
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          display: block;
          width: 0.7rem;
          height: 0.3rem;
          font-size: 0.16rem;
          text-align: center;
          line-height: 0.3rem;
          color: #f0f0f0;
          border-top-right-radius: 0.2rem;
          border-bottom-right-radius: 0.2rem;
        }
      }
    }
  }
</style>
